<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态树型导航</title>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .list{
            width: 210px;
            background: rebeccapurple;
        }
        li{
            list-style: none;
            /* background: rebeccapurple; */
            /* text-align: center; */
        }
        .list ul li a{
            /* position: relative; */
            /* display: block; */
            height: 36px;
            line-height: 36px;
            font-weight: bold;
        }
        a{
            text-decoration: none;
            color: aliceblue;
        }
        /* 链接未点击之前和点击之后的样式 */
        a:link{
            color: aqua;
        }
        /* 鼠标按下的瞬间a标签的样式 */
        a:active{
            color: brown;
        }
        ul.hide{
            display: none;
        }
        .list ul li ul li {
        	background-color:#d6e6f1;
        	/* border-color:#6196bb; */
        }

        span.anim {
            opacity: 1;
            color: grey;
            line-height: 30px;
            width: 40px;
            display: inline-block;
            text-align: center;
        }

        /* 小箭头旋转的样式 */
        .rota {
            transform: rotate(90deg);
        }

        .color {
            background: orangered;

        }
    </style>
</head>
<body>
    <div class="list">
        <ul class="one">
            <li>
                <span class="anim">></span>
                <a href="###" class="active">中国文联美术艺术中心</a>
                <ul class="hide two">
                    <li>&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">综合部</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">大型活动部</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">展览部</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">以为会工作部</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">信息资源不</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">刷给你年展</a></li>
                </ul>
            </li>
            <li>
                <span class="anim">></span>
                <a href="###" class="active">组织机构</a>
                <ul class="hide two">
                    <li>
                        &nbsp;&nbsp;&nbsp;
                        <span class="anim">></span>
                        <a href="###" class="active">没写机关</a>
                        <ul class="hide three">
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感激哦啊结果</a></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感激哦啊结果</a></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感激哦啊结果</a></li>
                        </ul>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;
                        <span class="anim">></span>
                        <a href="###" class="active">艺术中心</a>
                        <ul class="hide three">
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄国i哦额</a></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄国i哦额</a></li>
                        </ul>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;
                        <span class="anim">></span>
                        <a href="###" class="active">杂志社</a>
                        <ul class="hide three">
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度v规划</a></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度v规划</a></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度v规划</a></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度v规划</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <!-- <a href="###" class="active">哈哈哈巴啦啦</a>
                <ul class="hide">
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                </ul> -->
            </li>
        </ul>
    </div>


    <script>
        // 当文档被加载时触发函数
        $(function(){
            $('.active').click(function(){
                // 判断ul是否隐藏，如果是隐藏的就让它显示
                if($(this).siblings("ul").css("display")==="none"){
                    $(this).siblings("ul").slideDown(100);
                    $(this).parent('li').addClass('color');
                    $(this).parent('li').siblings().removeClass('color');
                    $(this).siblings('.anim').addClass('rota');
                }
                // 如果不是隐藏的，就让它隐藏
                else{
                    $(this).siblings("ul").slideUp(100);
                    $(this).siblings('.anim').removeClass('rota');
                }
            });
        })
    </script>

    <script>
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if(this.readyState==4 && this.status==200) {
                // 将后台返回的字符串数据转js对象
                myobj=JSON.parse(this.responseText);
                // 对数据进行处理
                $(document).ready(function() {
                    $.ajax({
                        url: '',
                        async: 'yes',
                        type: 'Post',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            $.each(data,function(i,n) {//遍历整体数据，第一级菜单
                                console.log(n.children);
                                // 添加一级菜单
                                $('ul.one').prepend("<li><span class='anim'><img src='' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+n.text+"</a></li><ul class='hide two'></ul>");
                                if(n.children!=="") {//如果1级菜单有子菜单,就添加2级菜单
                                    $('ul.two').prepend("<li>&nbsp;&nbsp;&nbsp;<span class='anim'><img src='' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+n.text+"</a></li><ul class='hide three'></ul>");
                                    if(n.children!=="") {//如果2级菜单有子菜单,就添加3级菜单
                                        $('ul.three').prepend("<li>&nbsp;&nbsp;&nbsp;<span class='anim'><img src='' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+n.text+"</a></li>");
                                    }
                                }
                            });
                        },error:function(data) {
                            alert("error:"+JSON.stringify(data));
                        }
                    })
                });
            }
        }
    </script>
</body>
</html>